diff options
Diffstat (limited to 'src/routes/projects/[projectId]/routine/[routineId]/+page.svelte')
| -rw-r--r-- | src/routes/projects/[projectId]/routine/[routineId]/+page.svelte | 27 |
1 files changed, 7 insertions, 20 deletions
diff --git a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte index 5f57de4..19713ae 100644 --- a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte +++ b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte @@ -1,11 +1,11 @@ <script lang="ts"> import { enhance } from '$app/forms'; + import ScoreBadge from '$lib/components/ScoreBadge.svelte'; + import StatusBadge from '$lib/components/StatusBadge.svelte'; import { formatFrequency, parseIntervalToDays, - STATUS_LABELS, computeHealthSeries, - type RoutineState, } from '$lib/shared/routine-metrics'; let { data, form } = $props(); @@ -74,19 +74,6 @@ .filter((m): m is { x: number; y: number } => m !== null); return { points, grid, markers }; }); - - function scoreClass(score: number): string { - if (score >= 80) return 'score bg-success'; - if (score >= 50) return 'score bg-accent'; - return 'score bg-danger'; - } - - function statusClass(status: RoutineState['status']): string { - if (status === 'ok') return 'status bg-success text-white'; - if (status === 'due') return 'status bg-accent-soft text-accent'; - if (status === 'late') return 'status bg-accent text-white'; - return 'status bg-danger text-white'; - } </script> <main> @@ -96,7 +83,7 @@ <header class="page-header"> <h1>{data.routine.name}</h1> - <span class={scoreClass(data.state.health)}>{data.state.health}</span> + <ScoreBadge score={data.state.health} /> </header> {#if data.routine.archived} @@ -195,10 +182,10 @@ {/each} </svg> <div class="chart-footer"> - <span class={statusClass(data.state.status)}> - {STATUS_LABELS[data.state.status]} - {#if data.state.overdueDays > 0}({data.state.overdueDays} j){/if} - </span> + <StatusBadge + status={data.state.status} + overdueDays={data.state.overdueDays} + /> <span class="chart-meta"> {formatFrequency(data.routine.frequencyDays)} {#if data.state.lastDoneAt} |